<template>
	<view class="full-page flex flex-col overflow-hidden root-style">
		<view class="status-box">
			<!-- <view class="process">课题进度：{{ExpiredTime}}，已学习词汇{{studyStore.RemeberCnt}}个</view> -->
			<view class="topbarview">
				<view style="text-align: center; flex: 1;border-right: 1px solid #E2E0E3; margin-top: 20rpx; margin-bottom: 20rpx;">
					<view style="font-size: var(--text-12); margin-bottom: 10rpx;">词句统计</view>
					<view style="font-size: var(--text-14); font-weight: bold;">{{RemeberCnt}}<text style="font-size: var(--text-12);color:#777;">词</text>/{{RemeberSentenceCnt}}<text style="font-size: 12px;color:#777;">句</text></view>
				</view> 
				<view style="text-align: center; flex: 1; margin-top: 20rpx; margin-bottom: 20rpx;"> 
					<view style="font-size: var(--text-12); margin-bottom: 10rpx; color:#777">{{ExpiredTime}}</view>
					<view style="">
						<text @click="classover" style="background-color: #777; font-size: var(--text-12); color:#fff; padding:2px 10px; border-radius: 5px;">下 课</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<step-group-test
				v-if="WordList.length>0"
				:isteacher="1"
				:reviewles="LessonUUID"
				:isreview="1"
				err-learn
				timer-bar-sty="top:0"
				:show-timer="true"
				@module-event="moduleEvent"
			/>
		</view>
		<u-modal v-model="showCoinBox" @confirm="confirmCoinBox" :title-style="{color: 'red'}">
			<view class="h-20px"></view>
			<view class="flex items-center justify-center">
				恭喜你获得{{Coin}}颗<u-image src="https://nx5.abc5g.com/images/been2.png" mode="aspectFit" width="30px" height="26px" ></u-image>
			</view>
			<view class="h-20px"></view>
		</u-modal>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ktlapi, ktluser, OT, dateFormat } from '@/utils/index.js'
	import StepGroupTest from "@/pages-study/study/modules/step-group-test"
	import { useStudyStore } from '@/store/study';
	
	defineOptions({ inheritAttrs: false })
	
	const WordList = ref([]);
	const LessonUUID = ref("");  
	const studyStore = useStudyStore();
	const GetDataTime = ref(0);
	const RemeberCnt = ref(0);
	const RemeberSentenceCnt = ref(0); 
	const ExpiredTime = ref("");
	const LessonInfo = ref({}); 
	const showCoinBox = ref(false);
	const Coin = ref(0);
	
	onLoad(query => {
		LessonUUID.value = query.uuid; 
		//console.log("query",query);
	})
	
	function classover(){
		uni.showModal({
			title: '提示',
			content: '是否结束课程?',
			success: function (res) {
				if (res.confirm) { 
					ktlapi({
						action: 'Cus_OverLesson',
						data: {
							LessonUUID: LessonUUID.value
						}
					}).then((resp) => {
						if (resp.data[0].Coin) {
							Coin.value = resp.data[0].Coin;
							showCoinBox.value = true;
						} else {
							uni.redirectTo({
								url:"/pages-study/study/modules/step-final-result?isreview=1&LessonId="+LessonUUID.value
							})
						}
					})
				} else if (res.cancel) {
					//console.log('用户点击取消'); 
				}
			}
		}); 
	}
	
	function moduleEvent({ action, payload }) {
		if (action === 'next') {
			// console.log(WordList.value);
			uni.navigateBack();
		}
	}
	
	function confirmCoinBox(){
		uni.redirectTo({
			url:"/pages-study/study/modules/step-final-result?isreview=1&LessonId="+LessonUUID.value
		})
	}
	
	var overTipsTimer = null;
	let interruptTime = new Date().getTime();
	
	function LoadReviewWords(){ 
		uni.showLoading({
			title: '加载中'  
		});
		ktlapi({
			apiurl: OT.CommandSet,
			action: "Cus_GetRememberSentence",
			data: {
				"UUID": LessonUUID.value, 
			}
		}).then(res => {
			//console.log("res",res);
			WordList.value = res.data.tables[0].table;
			
			if (WordList.value.length === 0) {
				uni.showModal({
					content: '本节课的词汇已经复习完毕',
					showCancel: false,
					success(res) {
						uni.navigateBack();
					}
				})
				return
			}
			
			//console.log(WordList.value);
			for(var i=0;i<WordList.value.length;i++){
				WordList.value[i]["NeedRemeber"] = true;
				WordList.value[i]["SentenceSnapshot"] = JSON.parse(WordList.value[i]["SentenceSnapshot"])
				WordList.value[i]["Methods"] = JSON.parse(WordList.value[i]["Methods"])
			}
			if(res.data.tables[1].table.length > 0){
				RemeberCnt.value = res.data.tables[1].table[0]["RemeberCnt"];
				RemeberSentenceCnt.value = res.data.tables[1].table[0]["RemeberSentenceCnt"];
			}
			LessonInfo.value = res.data.tables[2].table[0];
			if(LessonInfo.value.NowTime){
				GetDataTime.value = new Date(dateFormat(LessonInfo.value.NowTime, 'yyyy/MM/dd HH:mm:ss')).getTime();
			}  
			studyStore.setWordGroup(WordList.value);
			var shuffleWords = res.data.tables[3].table;
			studyStore.setShuffleWords(shuffleWords); 
			// studyStore.setSentence()
			
			overTipsTimer = setInterval(() => {
				// 如果两个时间之和大于课程结束时间，进行提示
				const nowTimeNum = new Date().getTime();
				const suffTimeNum = nowTimeNum - interruptTime;
				const { StudyDay, StartTime, EndTime } = LessonInfo.value;  
				
				const startTimeNum = new Date(dateFormat(StartTime, 'yyyy/MM/dd hh:mm:ss')).getTime();
				const endTimeNum = new Date(dateFormat(EndTime, 'yyyy/MM/dd hh:mm:ss')).getTime();
				
				const ExpiredSecond = (nowTimeNum - startTimeNum)/1000;  
				const hour = Math.floor(ExpiredSecond/60/60);  
				const minute = Math.floor((ExpiredSecond - hour*60*60)/60);
				const second = Math.floor(ExpiredSecond - hour*60*60 - minute*60);
				ExpiredTime.value = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
				
				
				
			}, 1000)
			
			uni.hideLoading();
		});
	}
	
	onUnmounted(() => {
		clearInterval(overTipsTimer);
	})
	
	onShow(() => {
		//console.log('show'); 
		LoadReviewWords();
	})
	
</script>

<style>
	.full-page{
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		
		/* #ifdef MP */
		/* #endif */
	}
	 .topbarview{
	 	display: flex;
	 	width:90%; 
	 	margin:0px auto;
	 	background-color: #F6F4F7;
	 }
	 .content{
		 flex: 1;
		 display: flex;
		 flex-flow: column;
	 }
</style>
